<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<style>
  .btn {
    outline: none;
    border: none;
    cursor: pointer;
    padding: 5px 12px;
  }
  .btn-text {
    color: #409eff;
    background-color: transparent;
  }
  .btn-text:hover {
    color: #66b1ff;
  }
  .fly-table {
    width: 400px;
    text-align: left;
    line-height: 42px;
    border: 1px solid #eee;
    user-select: none;
  }
</style>
<div id="app">
  <h2>Fly Table Component</h2>
  <button
    class="btn btn-text"
    title="点击使数组倒序"
    @click="handleReverse">
    倒序
  </button>
  <fly-table
    :fields="fields"
    :goods="goods">
    <!-- 组件标签包裹着的内容将被分发 -->
    <!-- 思考下，是否可以在fly-table组件中直接书写这段代码? -->
    <template slot-scope="{ row, col }">
      <span
        v-if="col.prop !== 'operate'">
          {{ row[col.prop] }}
        </span>
      <button
        class="btn btn-text"
        v-else
        @click="handleMarked(row)">
        切换标记
      </button>
    </template>
  </fly-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
//父组件通过props传值到子组件,子组件通过作用域slot穿值到父组件, col对应fields   row对应goods
  let FlyTable = {
    props: { // 组件接收从父组件传入的数据
      fields: {
        type: Array,
        default () {
          return []
        }
      },
      goods: {
        type: Array,
        default () {
          return []
        }
      }
    },
    template: function () {
      return '<table class="fly-table">\n' +
        '    <tr>\n' +
        '      <th\n' +
        '        v-for="(col, cIndex) in fields"\n'  
        '        :key="cIndex">\n' +
        '        {{ col.label }}\n' +
        '      </th>\n' +
        '    </tr>\n' +
        '    <tr\n' +
        '      v-for="(row, rIndex) in goods"\n' +
        '      :key="rIndex"\n' +
        '      :style="{color: row.isMarked ? \'#ea4335\' : \'\'}">\n' +
        '      <td\n' +
        '        style="border-top: 1px solid #eee"\n' +
        '        v-for="(col, cIndex) in fields"\n' +
        '        :key="cIndex">\n' +
        // slot应写在子组件中，用于接收父组件分发的内容
        '        <slot :row="row" :col="col"></slot>\n' +
        '      </td>\n' +
        '    </tr>\n' +
        '  </table>'
    }()
  }
  // 声明 Vue 实例
  let vm = new Vue({
    el: '#app',
    components: { FlyTable },
    data () {
      return {
        fields: [
          {
            label: '名称',
            prop: 'name'
          },
          {
            label: '数量',
            prop: 'quantity'
          },
          {
            label: '价格',
            prop: 'price'
          },
          {
            label: '',
            prop: 'operate'
          }
        ],
        goods: [
          {
            name: '苹果',
            quantity: 200,
            price: 6.8,
            isMarked: false
          },
          {
            name: '西瓜',
            quantity: 50,
            price: 4.8,
            isMarked: false
          },
          {
            name: '榴莲',
            quantity: 0,
            price: 22.8,
            isMarked: false
          }
        ]
      }
    },
    methods: {
      handleReverse () {
        this.goods.reverse()
      },
      handleMarked (row) {
        row.isMarked = !row.isMarked
      }
    }
  })
</script>
</body>
</html>